<template>
  <!--  上传相片功能 ----->

  <!--  删除和回显都放在组件内 接受imgUrl做回显 ----->

  <div class="uploadPhoto">

    <div class="projectImage" v-if="FileInfo.ImageUrl">
      <img :src="FileInfo.ImageUrl" />
      <div class="editBackground" @click="getInputClick">
        <div class="deleteIcon">
          <el-icon :size="30" color="#cdd0d6"><EditPen /></el-icon>
        </div>
      </div>
      <div class="deleteImage">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="are you sure delete ?"
          placement="top"
        >
          <el-icon color="#cdd0d6" :size="20"><Close /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <el-button
      v-show="!FileInfo.ImageUrl"
      type="primary"
      @click="getInputClick"
      class="img_btn"
    >
      <el-icon :size="30" color="#cdd0d6" ><Plus /></el-icon>
    </el-button>
    <input
      type="file"
      style="display: none"
      accept="*"
      ref="InputRef"
      @change="handleChangePic"
    />

    <div class="uploadInfo" v-if="loadingStatus">
      <el-progress :percentage="FileInfo.progressValue" status="success" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { Client } from "@/config/alioss/index.js";
import { ElMessage } from "element-plus";
// const props = defineProps({
//   ImageUrl: {
//     type: String,
//     default: "",
//     required: false,
//   },
//   FileName: String,
// });
// const emits = defineEmits(["UploadSuccess"]);
const FileInfo = reactive({
  RawFile: "", // 上传原文件
  progressValue: 0, // 进度
  ImageUrl: "", // 上传后的存储回显 Imageurl
  FileName: "", // 上传后文件名
});
const InputRef = ref();
const loadingStatus = ref(false);

const handleChangePic = (e) => {
  const [file] = e.target.files;
  console.log(file);
  FileInfo.RawFile = file;
  loadingStatus.value = true
  handleUplod(FileInfo.RawFile);
};

/** 图片上传 */
const handleUplod = (formData) => {
  FileInfo.FileName =
    "image/" + "banner" + `${JSON.stringify(new Date())}` + ".jpg";
  Client()
    .multipartUpload(FileInfo.FileName, formData, {
      progress: function (p: number) {
        FileInfo.progressValue = p * 100;
      },
    })
    .then(({ res }) => {
      console.log(res);
      if (res.statusCode == 200) {
        console.log("上传成功", res);
        FileInfo.ImageUrl =
          "https://kai-zhang.oss-cn-hangzhou.aliyuncs.com/" + FileInfo.FileName;
        console.warn(FileInfo.ImageUrl);
        loadingStatus.value = false
        ElMessage.success("图片上传成功啦~~~~~");
        // this.$emit("UploadSuccess",{Image:this.imageUrl,fileName:this.fileNames});
        // /** 请求成功将信息抛出 */
      } else {
        ElMessage.success("图片上传失败啦~~~~~");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const getInputClick = () => {
  InputRef.value.click();
};

</script>
<style lang="less" scoped>
.uploadPhoto {
  display: flex;
  .image {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .img_btn {
    width: 100px;
    height: 100px;
    background-color: #fafafa;
    border: 2px dashed #cdd0d6;
    .iconStyle {
      color: #1e80ff;
    }
  }
  .img_btn:hover {
    border: 2px dashed #1e80ff;
  }
  .uploadInfo {
    padding: 10px;
  }
}
.ivu-btn-dashed {
  background-color: #131e37 !important;
}
.projectImage {
  position: relative;
  width: 110px;
  height: 110px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .editBackground {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    display: flex;
    // &:hover {
    //   color: #fff !important;
    //   cursor: pointer;
    // }
  }
  .deleteImage {
    position: absolute;
    right: 0;
    top: 0;
    .el-icon {
      &:hover {
        color: #7033ff !important;
        cursor: pointer;
      }
    }
  }
  .deleteIcon {
    .el-icon {
      &:hover {
        color: #7033ff !important;
        cursor: pointer;
      }
    }
  }
}
</style>
